<template>
  <div v-show="data.isLoading">
    <ZhttLoading  :progress="data.progress"></ZhttLoading>
  </div>
  <div class="products" v-show="!data.isLoading"  id="product">
    <div class="desc-list"
         v-if="data.products.length!=0"
         v-for="(desc, index) in data.products[data.pIndex].desc"
         :class="{ active: data.descIndex == index }"
    >
      <h1 class="title">{{desc.title}}</h1>
      <p class="content">{{desc.content}}</p>
    </div>
    <div class="prod-list" :class="{ hidden: store.state.isFullscreen }">
      <h1><SketchOutlined></SketchOutlined>产品推荐</h1>
      <div class="products">
        <div class="prod-item" v-for="(prod, pI) in data.products" @click="changeMode(prod, pI)"
             :class="{ active: pI == data.pIndex }">
          <div class="prod-title">
            {{ prod.title }}
          </div>
          <div class="img">
            <img :src="prod.imgSrc" :alt="prod.title">
          </div>
          <a-button type="primary" block  @click.stop="addBuycart(prod)">
            <template #icon>
              <ShoppingCartOutlined></ShoppingCartOutlined>
            </template>
            加入购物车
          </a-button>
        </div>
      </div>
    </div>
    <div class="scene-list" :class="{ hidden: store.state.isFullscreen }">
      <h3><RadarChartOutlined></RadarChartOutlined>切换使用场景</h3>
      <div class="scenes">
        <div
            class="scene-item"
            v-for="(scene, index) in data.scenes"
            @click="changeHdr(scene, index)"
        >
          <img
              :class="{ active: index == data.sceneIndex }"
              :src="`./files/hdr/${scene}.jpg`"
              :alt="scene"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {getProductList} from '../../api/axios-utils';
import ZhttLoading from '@/components/zhtt-loading.vue';
import{ reactive, onMounted} from "vue";
import {SketchOutlined, RadarChartOutlined, ShoppingCartOutlined} from "@ant-design/icons-vue";
import { useStore } from "vuex";
import {Base3d} from "@/utils/base-3d.js";

const store = useStore();
const data = reactive({
  isLoading: true,
  products: [],
  scenes: [],
  pIndex: 0, // 当前选中的产品
  sceneIndex: 0, // 当前场景
  base3d:{},
  descIndex:0, // 滚动时显示第几个描述信息
  progress:0 // 当前进度
});
function LoadingFinish() {
  data.isLoading = false;
}
onMounted(async ()=>{
  const result = await getProductList();
  data.products = result.data.products;
  data.scenes = result.data.hdr;
  data.base3d = new Base3d('#product', LoadingFinish);
  data.base3d.onProgress((e) => {
    let progressNum = e.loaded / e.total;
    progressNum = progressNum.toFixed(2) * 100;
    data.progress = progressNum;
    console.log(progressNum);
  });
});

function changeHdr(scene, index) {
  data.sceneIndex=index;
  data.base3d.setEnvMap(scene);
}
// 选中产品
function changeMode(prod, pI){
  data.pIndex = pI;
  data.base3d.setModel(prod.modelName);
}
// 添加购物车
function addBuycart(prod) {
  let product = { ...prod, num: 1 };
  let index = 0;
  let isExist = store.state.buycarts.some((item, i) => {
    if (product.id == item.id) {
      index = i;
      return true;
    } else {
      return false;
    }
  });
  if (isExist) {
    store.commit("addBuycartsNum", index);
  } else {
    store.commit("addBuycarts", product);
  }
}
window.addEventListener("mousewheel", (e) => {
  store.commit('setFullscreen', e.deltaY>0);
});
window.addEventListener("mousewheel", (e) => {
  let duration = data.base3d && data.base3d.animateAction && data.base3d.animateAction._clip.duration;
  let time = data.base3d.animateAction && data.base3d.animateAction.time;
  let index = Math.floor((time / duration) * 4);
  data.descIndex = index;
  console.log('data.descIndex：', data.descIndex);
});
</script>

<style lang="less" scoped>
@import '@css/zhtt-var.less';
.desc-list {
  position: fixed;
  z-index: @productpage-desc-zindex;
  background-color: rgba(255, 255, 255, 0.5);
  width: 600px;
  top: 100px;
  left: 50%;
  margin-left: -300px;
  transition: all 0.5s;

  transform: translate(-100vw, 0);
  padding: 15px;
}
.desc-list.active {
  transform: translate(0, 0);
}
.prod-list {
  width: 300px;
  height: 100vh;
  padding: 0;
  position: fixed;
  z-index: @productpage-zindex;
  transition: all 0.5s;
  background-color: rgba(255, 255, 255, 0.8);
  left: 0;
  top: @header-margin;

  .prod-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 250px;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    margin: 10px 0;
    box-shadow: 2px 2px 5px #666;
    transition: all 0.3s;
    &.active {
      box-shadow: 2px 2px 5px #666, 0px 0px 10px red;
    }
    &:hover {
      transform: translate(0px, -5px);
      box-shadow: 2px 2px 5px #666, 0px 0px 10px orangered;
      // background-color: orange;
    }
    img {
      width: 190px;
    }
    .prod-title {
      padding: 0 20px;
    }
  }
}

.scene-list {
  width: 300px;
  height: 100vh;
  padding: 0;
  position: fixed;
  z-index: @productpage-zindex;
  transition: all 0.5s;
  background-color: rgba(255, 255, 255, 0.8);
  right: 0;
  top: @header-margin;

  h3 {
    font-size: 20px;
    font-weight: 900;
    padding: 0 30px;
  }
  .scenes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .scene-item {
    padding: 6px 0;

    img {
      width: 250px;
      border-radius: 10px;
      box-shadow: 2px 2px 10px #666;
      transition: all 0.3s;
      &.active {
        box-shadow: 2px 2px 5px #666, 0px 0px 10px red;
      }
      &:hover {
        transform: translate(0px, -5px);
        box-shadow: 2px 2px 5px #666, 0px 0px 10px orangered;
      }
    }
  }
}
.prod-list.hidden {
  transform: translate(-100%, 0);
}
.scene-list.hidden {
  transform: translate(100%, 0);
}
</style>
